<script>
export default {
  name: 'my-welfare-tab',
  props: {
    tabList: Array,
    /* vue2 v-model数据的双向绑定 */
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // tabPosition: 0,
    }
  },
  methods: {

  },
  computed: {
    active() {
      return (index) => {
        const tabNum = this.tabList.length
        let gravity = ''
        if (index === 0) {
          gravity = 'left'
        }
        if (index === 1) {
          gravity = tabNum === 2 ? 'right' : 'middle'
        }
        if (index === 2) {
          gravity = tabNum === 2 ? 'middle' : 'right'
        }
        if (index === 3) {
          gravity = tabNum === 2 ? 'middle' : 'right'
        }
        return this.value === index ? 'active-' + gravity : ''
      }
    },
  },
}
</script>

<template>
  <!--   tab栏   -->
  <view class="tab">
    <view
      @click="$emit('input', index)"
      class="tab-item"
      :class="[active(index)]"
      v-for="(item, index) in tabList"
      :key="index"
    >
      {{ item }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.tab {
  margin: 20rpx auto;
  width: 710rpx;
  height: 70rpx;
  display: flex;
  background-size: 100% 100%;
  background-image: url('https://www.dingxians.cn/upload/user_static/welfare/bg-tab.png');

  .tab-item {
    width: 355rpx;
    height: 83rpx;
    line-height: 70rpx;
    text-align: center;
    color: white;
    font-size: 28rpx;
    background-size: 100% 100%;

    &.active-left {
      font-weight: bold;
      background-image: url('https://www.dingxians.cn/upload/user_static/welfare/bg-tab-active-left.png');
    }

    &.active-middle {
      font-weight: bold;
      background-image: url('https://www.dingxians.cn/upload/user_static/welfare/bg-tab-active-middle.png');
    }

    &.active-right {
      font-weight: bold;
      background-image: url("https://www.dingxians.cn/upload/user_static/welfare/bg-tab-active-right.png");
    }
  }
}
</style>